<template>
  <div class="channel-router">
    <div class="form-box">
        <el-form ref="detailChannel" :model="detailChannel" label-width="100px">
            <el-form-item label="贴牌编号">
                <span v-html="brandcode"></span>
            </el-form-item>
             <el-form-item label="通道名称">
                <span v-html="cell.name"></span>
            </el-form-item>
             <el-form-item label="通道tag">
                <span v-html="cell.channelTag"></span>
            </el-form-item>
             <el-form-item label="选择通道">
                <el-select placeholder="请选择后台显示通道" v-model="detailChannel.target_channel_tag">
                    <el-option 
                    v-for="(item,index) in channelList" 
                    :key="index"
                    :value="item.id"
                    :label="item.name+'-('+item.channelTag+')'"
                    ></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="选择类型">
                <el-select placeholder="请选择类型" v-model="detailChannel.channel_type">
                    <el-option 
                    v-for="(item,index) in channelTypeList" 
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                    ></el-option>
                </el-select>
            </el-form-item>
             <el-form-item >
                <el-button  @click="submitChannel" type="danger">提交</el-button>
                <el-button @click="backList">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "channel-router",
  props: {
    cell: {
      type: Object,
      default: function() {
        return {};
      }
    },
    brandcode: {
      type: [String, Number],
      default: function() {
        return "1";
      }
    }
  },
  data() {
    return {
      detailChannel: {
        target_channel_tag: null,
        channel_type: null
      },
      channelList: [],
      channelTypeList: [
        { value: 0, label: "充值" },
        { value: 1, label: "支付" },
        { value: 2, label: "提现" }
      ]
    };
  },
  components: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      // 获取真实系统通道
      let url = `paymentchannel/detail/query/all`;
      this.$Http
        .post(url, ``)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.channelList = res.data.result;
          } else {
            this.$notify.info({
              title: "提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "提示",
            message: "获取真实系统通道失败！"
          });
        });
    },
    submitChannel() {
      if (this.detailChannel.target_channel_tag === null) {
        this.$message.error("请选择真实通道");
        return;
      }
      if (this.detailChannel.channel_type === null) {
        this.$message.error("请选择类型");
        return;
      }
      let url = `paymentchannel/route/add`,
        params = `brandcode=${this.brandcode}
                &channel_name=${this.cell.name}
                &channel_tag=${this.cell.channelTag}
                &target_channel_tag=${this.detailChannel.target_channel_tag}
                &channel_type=${this.detailChannel.channel_type}`;
      this.$Http
        .post(url, params)
        .then(res => {
          this.$notify.info({
            title: "提示",
            message: res.data.resp_message
          });
          if (res.data.resp_code === "000000") {
            // 切换成功
            this.backList();
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "提示",
            message: "切换通道提交失败！"
          });
        });
    },
    backList() {
      this.$emit("close-dialog");
    }
  }
};
</script>
<style scoped>
.channel-router {
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ededed;
}
</style>